<template>
	<view class="content ">
		<tab v-model="activeKey" :navData="scrollData" @change="tabChange" @tabClick="tabClick">
			<view :slot="item.slot" v-for="(item,key) in scrollData" :key="key">
				<scroll-view scroll-y height="400rpx">
					<!-- 预约须知 -->
					<view v-if="key==0">
						<unicloud-db v-slot:default="{data, loading, error, options}" collection="subscribe-reading">
							<view v-for="(item,index) in data" :key="index">
								<uni-card :title="item.title">
									<text class="notice-card">{{item.content}}</text>
								</uni-card>
							</view>
						</unicloud-db>
					</view>

					<!-- 预约订单 -->
					<view v-else>
						<uni-forms ref="form" :value="formData" class="uni-container" validate-trigger="submit"
							err-show-type="toast">
							<uni-forms-item name="type" label="预约类型" required>
								<uni-data-select v-model="formData.type" :localdata="range" @change="change"
									:clear="false"></uni-data-select>
							</uni-forms-item>
							<uni-forms-item name="date_time" label="预约时间" required>
								<uni-datetime-picker v-model="formData.date_time" />
							</uni-forms-item>
							<uni-forms-item name="title" label="汽车名" required>
								<uni-easyinput type="text" v-model="formData.title"></uni-easyinput>
							</uni-forms-item>
							<uni-forms-item name="name" label="联系人" required>
								<uni-easyinput type="text" v-model="formData.name"></uni-easyinput>
							</uni-forms-item>
							<uni-forms-item name="phone" label="手机号" required>
								<uni-easyinput type="text" v-model="formData.phone"></uni-easyinput>
							</uni-forms-item>
							<uni-forms-item name="content" label="汽车状况描述">
								<textarea @input="binddata('content', $event.detail.value)" class="uni-textarea-border"
									v-model="formData.content" trim="right"></textarea>
							</uni-forms-item>
							<!-- 							<uni-forms-item name="imgs" label="相关图片">
								<uni-file-picker file-mediatype="image" :limit="6" return-type="array"
									v-model="formData.imgs"></uni-file-picker>
							</uni-forms-item> -->
							<view class="uni-button-group">
								<button type="primary" class="uni-button" @click="submitForm">提交预约</button>
							</view>
						</uni-forms>
					</view>
				</scroll-view>
			</view>
		</tab>
	</view>
</template>

<script>
	import tab from '@/components/Mark-Tab/Tab.vue';


	const db = uniCloud.database();
	const dbCollectionName = 'uni-id-base-order';


	export default {
		data() {
			let formData = {
				"content": "",
				"imgs": [],
				"date_time": '',
				"title": '',
				"status": 0,
				"type": 0,
				"goods_id": "",
				"name": '',
				"phone": ''
			}
			return {
				formData,
				formOptions: {},
				activeKey: 0,
				scrollData: [{
						label: '预约须知',
						slot: 'slot-1'
					},
					{
						label: '我要预约',
						slot: 'slot-2'
					}
				],
				value: 0,
				range: [{
						value: 0,
						text: "看车预约"
					},
					{
						value: 1,
						text: "保养预约"
					},
					{
						value: 2,
						text: "维修预约"
					}
				],
			}
		},
		methods: {
			/**
			 * 触发表单提交
			 */
			submitForm() {
				if (!this.check()) {
					return
				}
				// 使用 clientDB 提交数据
				db.collection(dbCollectionName).add(this.formData).then((res) => {
					uni.showToast({
						icon: 'none',
						title: '预约成功！'
					})
					// this.getOpenerEventChannel().emit('refreshData')
					// setTimeout(() => uni.navigateBack(), 500)
					this.formData = {
						"content": "",
						"imgs": [],
						"date_time": '',
						"title": '',
						"status": 0,
						"type": 0,
						"goods_id": "",
						"name": '',
						"phone": ''
					}
				}).catch((err) => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				}).finally(() => {
					uni.hideLoading()
				})
			},

			/**
			 * 获取表单数据
			 * @param {Object} id
			 */
			getDetail(id) {
				uni.showLoading({
					mask: true
				})
				db.collection(dbCollectionName).doc(id).field("content,imgs,contact,mobile").get().then((res) => {
					const data = res.result.data[0]
					if (data) {
						this.formData = data
					}
				}).catch((err) => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				}).finally(() => {
					uni.hideLoading()
				})
			},
			check() {
				let flag = true
				if (this.formData.date_time == '') {
					uni.showModal({
						content: '请选则预约日期',
						icon: 'warn',
						showCancel: false
					});
					flag = false
				} else if (this.formData.title == '') {
					uni.showModal({
						content: '请输入汽车名',
						icon: 'warn',
						showCancel: false
					});
					flag = false
				} else if (this.formData.name == '') {
					uni.showModal({
						content: '请输入联系人姓名',
						icon: 'warn',
						showCancel: false
					});
					flag = false
				} else if (this.formData.phone == '') {
					uni.showModal({
						content: '请输入联系人电话',
						icon: 'warn',
						showCancel: false
					});
					flag = false
				}

				return flag
			},
			tabChange(e) {
				console.log(e);
			},
			tabClick(e) {
				console.log(e);
			},
			change(e) {
				console.log("e:", e);
			},
		},
		components: {
			tab
		},

	}
</script>

<style>
	.uni-container {
		padding: 15px;
	}

	.uni-input-border,
	.uni-textarea-border {
		width: 100%;
		font-size: 14px;
		color: #666;
		border: 1px #e5e5e5 solid;
		border-radius: 5px;
		box-sizing: border-box;
		background-color: white;
	}

	.uni-input-border {
		padding: 0 10px;
		height: 35px;

	}

	.uni-textarea-border {
		padding: 10px;
		height: 80px;
	}

	.uni-button-group {
		margin-top: 50px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
	}

	.uni-button {
		width: 184px;
		padding: 12px 20px;
		font-size: 14px;
		border-radius: 4px;
		line-height: 1;
		margin: 0;
	}

	/* 选择地址 */
	.confirm-address-image {
		height: 150rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.choose-address {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.address-font {
		font-size: 24rpx;
		color: #8a8a8a;
		height: 50%;
	}

	.address-font-box {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.outer-box {
		background-color: #ffffff;
		width: 710rpx;
		margin: 0 auto 26rpx;
		border-radius: 18rpx;
		overflow: hidden;
	}
</style>